<template>
  <div>
    <ul>
      <li :style="{ opacity }">欢迎学习Vue</li>
      <li>news01 <input type="text" /></li>
      <li>news02 <input type="text" /></li>
      <li>news03 <input type="text" /></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "myNews",
  data() {
    return {
      opacity: 1,
    };
  },
  beforeDestroy() {
    console.log("news组件即将被销毁");
  },
  /**
   * (1) 新的生命周期函数：activated与deactivated
   * 其中activated函数表示激活本组件时触发，deactivated函数是失活时触发
   * 需要配合keep-alive一起使用，activated在mounted后面执行
   *                           deactivated在beforeDestroy之前执行
   * 这样就可以让组件缓存(不销毁)的情况下，可以在离开组件时在deactivated中
   * 解除一些不必要的动作，减少开销
   * */ 
  activated() {
    this.timer = setInterval(() => {
      console.log("@");
      this.opacity -= 0.01;
      if (this.opacity <= 0) this.opacity = 1;
    }, 16);
  },
  deactivated() {
    clearInterval(this.timer);
  },
};
</script>

<style></style>
